{extend name="./app/admin/view/main.html" /}
{block name="title"}网站菜单 -{__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}

<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">网站菜单</h4> <h5 class="sub-title">网站主菜单管理</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='addItemDialog'>
            <span><Icon type="md-add"></Icon> 添加菜单项</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <section class="mip-box-body">
            <section class="diy-table-list" v-cloak>

                <table class="table table-hover diy-table-list">
                    <thead>
                    <tr class="diy-table-item-header">
                        <th style="width: 60px">&nbsp;</th>
                        <th style="width: 100px">ID</th>
                        <th>节点名称</th>
                        <th>节点链接</th>
                        <th style="width: 100px">状态</th>
                        <th style="width: 100px">排序</th>
                        <th style="width:120px">操作</th>
                    </tr>
                    </thead>

                    <tbody class="diy-table-body">
                    <template v-if='itemList.length' v-for='(item,index) in itemList'>
                        <tr class="tr1 diy-table-item">
                            <td>
                                <i-Button type="button" size="small" v-if='item.children.length'
                                          @click='openChildren(item)'>
                                    <Icon type="ios-arrow-forward" v-if='!item.isOpen'></Icon>
                                    <Icon type="ios-arrow-down"  v-if='item.isOpen'></Icon>
                                </i-Button>
                            </td>
                            <td>{{item.id}}</td> <td v-html="item.item_title"> </td> <td> {{item.item_url}}</td>
                            <td> {{item.item_status}}</td>
                            <td>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item)'
                                          :disabled='index==0'>
                                    <Icon type="md-arrow-round-up" />
                                </i-Button>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item)'
                                          :disabled='itemList.length==index+1'>
                                    <Icon type="md-arrow-round-down" />
                                </i-Button>
                            </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                    <i-button type="success" @click="editItemDialog(index, item)">修改</i-button>
                                    <i-button type="warning" :disabled="item.children.length != 0" @click="itemDel(index, item)">删除</i-button>
                                </Button-Group>
                            </td>

                        </tr>

                        <tr :class='{"is-open":item.isOpen,"tr-child":true}' v-if='item.children.length != 0'
                            v-for='(sub,subIndex) in item.children'>
                            <td></td>
                            <td style="padding-left:10px">{{sub.id}}</td> <td> {{sub.item_title}}</td> <td> {{sub.item_url}}</td>
                            <td> {{sub.item_status}}</td>
                            <td>
                                <i-button type="text" size="small" @click='moveUp(item,sub)' :disabled='subIndex==0'>
                                    <Icon type="md-arrow-round-up" />
                                </i-button>
                                <i-button type="text" size="small" @click='moveDown(item,sub)' :disabled='item.children.length==subIndex+1'>
                                    <Icon type="md-arrow-round-down" />
                                </i-button>
                            </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                <i-button type="success" @click="editItemDialog(subIndex, sub)">修改</i-button>
                                <i-button type="warning" @click="itemDel(subIndex, sub)">删除</i-button>
                                </Button-Group>
                            </td>
                        </tr>


                    </template>

                    <template v-if="itemList.length==0">
                        <tr>
                            <td colspan="7" class="no-block">
                                <Icon type="ios-filing-outline"></Icon>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </template>
                    </tbody>

                </table>

            </section>
        </section>
    </section>
</main>
<Modal v-model="showDialog" size="large" v-cloak>
    <i-form :model="mitem" :rules="mitem.mitemRules" ref="fmitem" :label-width="80">
        <Tabs :animated='false' v-model="itemTabsValue">
            <Tab-Pane label="基础信息" name='default'>
                <Form-Item label="上级节点" prop="pid">
                    <i-Select v-model="mitem.pid" transfer style="width:200px"
                              :disabled='mitem.item_status && mitem.pid == 0 && mitem.isChild'>
                        <i-Option v-for="item in rootItemList" :disabled="item.disabled" :value="item.id"
                                  :key="item.id">{{ item.item_title }}
                        </i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="节点名称" prop="item_name">
                    <i-input v-model="mitem.item_title" placeholder="例：平步新闻"></i-input>
                    <span class="form-note"></span>
                </Form-Item>
                <Form-Item label="节点Url" prop="item_url">
                    <i-input placeholder="例：/article/12.html" v-model="mitem.item_url"></i-input>
                </Form-Item>
                <Form-Item label="状态" prop="item_status">
                    <i-switch v-model="mitem.item_status">
                        <span slot="open">启用</span>
                        <span slot="close">禁用</span>
                    </i-switch>
                    <span class="form-note">&nbsp;&nbsp;&nbsp;选择是：将显示在前台网站的主菜单</span>
                </Form-Item>

            </Tab-Pane>
        </Tabs>
    </i-form>
    <div slot="footer" class="dialog-footer">

        <i-button type="primary" @click="itemPost()">确 定</i-button>
        <i-button @click="showDialog = false">取 消</i-button>
    </div>
</Modal>

{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
            showDialog: false,

            mitem: {
                id: '',
                pid: 0,
                item_title: '',
                item_url: '',
                item_status: true,
                mitemRules: {
                    item_title: [{
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    }],

                },
                saveStatus: 'add',
                isChild: false,
            },
            itemList: [],
            rootItemList: [],
            itemTabsValue: 'default',
        },
        watch: {},
        mounted() {
            this.getItemList();
        },
        methods: {
            moveUp(item, subItem) {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].sort = i;
                    if (itemList[i].children.length) {
                        for (var j = 0; j < itemList[i].children.length; j++) {
                            itemList[i].children[j].sort = j;
                        }
                    }
                }
                if (!subItem) {
                    for (var i = 0; i < itemList.length; i++) {
                        if (item.id == itemList[i].id) {
                            itemList[i - 1].sort = i;
                            itemList[i].sort = i - 1;
                        }
                    }
                } else {
                    for (var i = 0; i < itemList.length; i++) {
                        if (item.id == itemList[i].id) {
                            for (var j = 0; j < itemList[i].children.length; j++) {
                                if (subItem.id == itemList[i].children[j].id) {
                                    itemList[i].children[j - 1].sort = j;
                                    itemList[i].children[j].sort = j - 1;
                                }
                            }
                        }
                    }

                }
                this.itemList = itemList;
                this.itemSortSave();
            },
            moveDown(item, subItem) {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].sort = i;
                    if (itemList[i].children.length) {
                        for (var j = 0; j < itemList[i].children.length; j++) {
                            itemList[i].children[j].sort = j;
                        }
                    }
                }
                if (!subItem) {
                    for (var i = 0; i < itemList.length; i++) {
                        if (item.id == itemList[i].id) {
                            itemList[i + 1].sort = i;
                            itemList[i].sort = i + 1;
                        }
                    }
                } else {
                    for (var i = 0; i < itemList.length; i++) {
                        if (item.id == itemList[i].id) {
                            for (var j = 0; j < itemList[i].children.length; j++) {
                                if (subItem.id == itemList[i].children[j].id) {
                                    itemList[i].children[j + 1].sort = j;
                                    itemList[i].children[j].sort = j + 1;
                                }
                            }
                        }
                    }
                }
                this.itemList = itemList;
                this.itemSortSave();
            },
            openChildren(item) {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    if (item.id == itemList[i].id) {
                        itemList[i].isOpen = !itemList[i].isOpen;
                    }
                }
                this.itemList = itemList;
            },
            addItemDialog: function () {
                this.mitem.isChild = false;
                this.itemTabsValue = 'default';
                this.mitem.pid = 0;
                this.mitem.item_title = '';
                this.mitem.item_url = '';
                this.mitem.id = '';
                this.mitem.item_status = true;

                this.mitem.saveStatus = 'add';
                this.showDialog = true;
            },
            itemSortSave() {
                var itemList = this.itemList;
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminMainmenu/do_sort_save', {
                    itemList: itemList,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getItemList();
                    }
                });
            },
            itemPost() {
                this.$refs['fmitem'].validate((valid) => {
                    if (valid) {

                        if (this.mitem.saveStatus == 'add' ||this.mitem.saveStatus == 'edit'  ) {
                            this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminMainmenu/do_save', this.mitem).then(res => {
                                if (res.code == 1) {
                                    this.showDialog = false;
                                    this.$Message.success(res.msg);
                                    this.getItemList();
                                }
                            });
                        }
                    }else{
                        this.$Message.error('valid fail'+ valid);
                    }
                });
            },
            itemDel(index, val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p style="color:#ff9900;">删除项：' + val.item_title + '</p><p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminMainmenu/do_del', {
                            id: val.id,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.getItemList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getItemList: function () {
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminMainmenu/get_list', {}).then(res => {

                    if (res.code == 1) {
                        var mainmenu = res.data.mainmenu;
                        var selectItems = [{id:0,item_title:'顶级菜单'}];
                        for (var i = 0; i < mainmenu.length; i++) {
                            mainmenu[i].isOpen = true;
                            selectItems.push({id:mainmenu[i].id, item_title:mainmenu[i].item_title});
                        }
                        this.itemList = mainmenu;
                        this.rootItemList = selectItems;
                    }
                });
            },
            editItemDialog(index, row) {
                this.itemTabsValue = 'default';
                this.showDialog = true;
                this.mitem.saveStatus = 'edit';

                this.mitem.id = row.id;
                this.mitem.item_title = row.item_title;
                this.mitem.pid = row.pid;
                this.mitem.item_url = row.item_url;
                this.mitem.item_status = row.item_status == 1;

                this.mitem.isChild = false;
                this.mitem.dialogCategoryTitle = '编辑菜单项';
                if (row.pid == 0) {
                    for (var i = 0; i < this.rootItemList.length; i++) {
                        if (row.id == this.rootItemList[i].id) {
                            this.rootItemList[i].disabled = true;
                            if (row.children.length > 0) {
                                this.mitem.isChild = true;
                            }
                        } else {
                            this.rootItemList[i].disabled = false;
                        }
                    }
                }
            },
        }
    })
</script>
{/block}